<template>
    <a-render>
        <template #search>
          <SearchForm 
            :span="6" 
            :fields="req" 
            :list="searchFormJSON" 
            :toggle-span="[12, 12]"
            :show-toggle="false"
            @search="callbackSearch"
            @reset="callbackReset"
          ></SearchForm>
        </template>
        <Table ref="tabelRef" :tree-config="{expandAll: true} " :is-page="false" :data="dataList" :column="column" :operation="false">
          <template #left>
            <a-button type="primary" @click="openModal('add', 'openMenu')">添加菜单</a-button>
          </template>
          <template #operation="data">
            <template v-if="!isAdmin(data.row.role_id)">
              <a-button type="link" @click="openModal('edit', 'openMenu', data.row)">编辑</a-button>
              <a-button type="link" v-if="!data.row.parent_id" @click="openModal('addsub', 'openMenu', data.row)">添加子级</a-button>
              <a-button type="link" v-if="data.row.parent_id" @click="openModal('power', 'openSetPower', data.row)">按钮权限</a-button>
              <a-button type="link" danger @click="del(data.row)">删除</a-button>
            </template>
          </template>
        </Table>
    </a-render>
    <MenuForm v-model:open="state.openMenu" :type="state.type" v-if="state.openMenu" :row="state.row" @ok="handelOk"  />
    <UserEditForm v-model:open="state.openEditUser" v-if="state.openEditUser" :row="state.row" title="编辑用户" @ok="handelOk"  />
    <SetPower v-model:open="state.openSetPower" v-if="state.openSetPower" :row="state.row" title="设置权限" @ok="handelOk"  />
    <roleMember v-model:open="state.openMenuMember" v-if="state.openMenuMember" :row="state.row" title="角色成员" @ok="handelOk"  />
</template>
<script setup>
import { ref, getCurrentInstance, h, reactive, onMounted } from 'vue'
// 路由对象
import { useRouter } from "vue-router"
import { IS_NULL } from "@/constant/index"
// 组件
import SearchForm from "@/components/searchForm/search.vue"
import Table from "@/components/table/index.vue"
import Switch from "@/components/control/switch/index.vue"
// message
import { message } from "ant-design-vue"
// modal
import MenuForm from "../component/menuForm/index.vue"
import UserEditForm from "../component/editUser.vue"
import SetPower from "../component/setPower/index.vue"
import roleMember from "../component/roleMember.vue"
// 搜索和表格配置
import { column } from "./column"
import { useSearchForm } from "./search"
// hook
import { useTable } from "@/hook/index"
// storage
import { setToken, isAdmin } from "@/utils"
// API
import { menuListsTree, menuremove } from "@/api/menu"
// proxy
const { proxy } = getCurrentInstance()
const tabelRef = ref(null)
const { uesSetTotal, usePage, useSize, useSearch, useReset } = useTable(tabelRef)
// 路由
const router = useRouter()
// 搜索配置项
const { searchFormJSON } = useSearchForm()
const req = reactive({
  pageIndex: usePage,
  pageSize: useSize,
})

const handelOk = () => {
  getList()
  console.log('异步请求成功，回调')
}

const state = reactive({
  row: {},
  openMenu: false,
  openEditUser: false,
  openSetPower: false,
  openMenuMember: false,
  type: ''
})

const openModal = (type, key, row = {}) => {
  state.type = type
  state.row = row
  state[key] = true
}
// 列表数据
const dataList = ref([])

const del = (row) => {
  proxy.$confirm({
    title: "确认删除？",
    content: `是否确认删除当前菜单？`,
    okAsync: () => {
      return new Promise((resolve, reject) => { // then，catch
        menuremove({menu_id: row.menu_id}).then(() => {
          getList()
          resolve()
        }).catch(() => {
          reject()
        })
      })
    }
  })
}

const switchBeforeChange = (params) => {
  const content = params.role_status 
                  ? 
                  h('span', { class: "color-error" }, '删除后该用户ID将在本系统中将无法登录使用并删除，',
                    h('span', { class: "color-9"}, '请谨慎操作！')
                  ) 
                  : h('span', { class: "color-error" }, '启用后用户在本系统的权限将一并重新开启。')
  return new Promise((resolveSwitch, rejectSwitch) => {
    proxy.$confirm({
      title: params.role_status ? "确认禁用？" : "确认启用？",
      content,
      okAsync: () => {
        return new Promise((resolve, reject) => { // then，catch
          roleStaus({
            id: params.role_id,
            status: params.role_status ? 0 : 1
          }).then(res => {
            message.success(res?.msg)
            resolve()
            resolveSwitch()
          }).catch(() => {
            reject()
          })
        })
      },
      cancelAsync: () => {
        rejectSwitch()
      }
    })
  })
}

const handelRoleMember = (row) => {
  const value = row?.roleMembers
  openModal('openMenuMember', value)
}

/**
 * 获取菜单列表 
 */
const getList = () => {
  menuListsTree(req).then(res => {
    dataList.value = res.content
  })
}

/**
 * 搜索
 */
const callbackSearch = () => {
  console.log(req.value)
}
/**
 * 设置
 */
 const callbackReset = () => {
  console.log(req.value)
}
const toDetailed = (id) => {
    router.push(`/detailed/${id}`)
}

onMounted(() => {
  getList()
})
</script>